﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Introduction to JavaScript Client Pages</title>
    <link rel="Stylesheet" type="text/css" href="Stylesheet.css" />
    <link rel="Stylesheet" type="text/css" href="Simple.css" />
</head>
<body>
    <div id="header">
        <span class="technology">
            JavaScript Client Pages
        </span>
        <span class="title">
            Developer's Manual
        </span>       
        <span class="sub-title">
            Getting Started
        </span>
    </div>
    <div id="body">
        <a name="WhatAreJSCP"></a>
        <h1>What are JavaScript Client Pages?</h1>
        <p>
            JavaScript Client Pages is a client-side Web development technology that
            makes it possible to develop client-side user interface code using the
            same paradigm as the one that is used on the server side, thereby making
            the overall design of the Web application more consistent and saving 
            development time by cutting down on imperative JavaScript code development
        </p>
        <a name="Requirements"></a>
        <h1>Requirements</h1>        
        
        <h2>Minimum Requirements</h2>
        <ul>
            <li>An XSLT processor with support for the document() function</li>
            <li>
                Rudimentary XHTML development skills using proper well-formed XML
                syntax.
            </li>    
            <li>
                A browser with full DOM Level 1 support
            </li>
        </ul>
        <h2>Recommended</h2>
        <ul>
            <li>
                One of the platforms that are fully supported as of this
                version:
                <ul>
                    <li>.NET 3.5 with ASP.net</li>
                    <li>PHP</li>
                </ul>
            </li>
            <li>
                An IDE with full support for XML Schema to provide
                code completion.                
            </li>
        </ul>
        
        <a name="DesignGoals"></a>
        <h1>Design Goals</h1>
        <ul>
            <li>Platform independence</li>
            <li>Ease of development</li>
            <li>
                Standards compliance
                <ul>
                    <li>XHTML</li>                                        
                    <li>XML</li>
                    <li>ECMAScript (JavaScript/JS)</li>
                    <li>XSLT</li>
                    <li>XML Schema</li>
                </ul>
            </li>
            <li>Correct markup</li>
        </ul>
        <a name="WhyJSCP"></a>        
        <h1>Why JavaScript Client Pages</h1>
        <p>
            On the server side, the generation of XHTML code is usually performed in a
            rather straightforward fashion using mostly declarative code consisting
            of XHTML tags, embedded scripting code and custom controls. This approach is 
            widely used on all of the platforms listed below:
        </p>
        <ul>
            <li>JavaServer Pages (JSP)</li>
            <li>JavaServer Faces (JSF)</li>
            <li>ASP.net</li>
            <li>Classic ASP</li>
            <li>PHP</li>
            <li>Ruby on Rails</li>
        </ul>
        <p>
            On the client side, however, the lack of integration between code and markup makes it
            rather difficult to generate code. Given below are several approaches used by rich
            application developers.
        </p>
        
        <h2>String Concatenation</h2>
        <div class="code">
            var html = '&lt;table class="grid"&gt;'
                <div class="indent">
                    + '&lt;thead&gt;' <br />
                    + '&lt;th&gt;First Name&lt;/th&gt;' <br />
                    + '&lt;th&gt;Last Name&lt;/th&gt;' <br />
                    + '&lt;th&gt;Salary&lt;/th&gt;' <br />
                    + '&lt;/thead&gt;' <br />
                    + '&lt;tbody&gt;'; <br />
                </div>
            for(var i=0;i &lt; items.length; i++) {
                <div class="indent">
                    html += '&lt;tr&gt;' <br />
                        + '&lt;td class="name"&gt;' <br />
                        + items[i].firstName <br />
                        + '&lt;/td&gt;' <br />
                        + '&lt;td class="name"&gt;' <br />
                        + items[i].lastName <br />
                        + '&lt;/td&gt;' <br />
                        + '&lt;td class="amount"&gt;' <br/>
                        + formatCurrency(items[i].salary); <br />
                        + '&lt;/td&gt;' <br />
                        + '&lt;/tr&gt;';
                </div>
            }<br />
            html += '&lt;/tbody&gt;';<br />
            document.getElementById('container-1').innerHTML = html;
        </div>
        <h2>DOM Construction</h2>
        <div class="code">
            var list = document.createElement('ul');<br />
            list.className = 'names';<br />
            for (var i=0;i &lt; items.length; i++) {
                <div class="indent">
                    var item = document.createElement('li'); <br />
                    if (items[i].amount &gt;= threshold) { <br />
                        <div class="indent">
                            item.className = 'over';
                        </div>
                    } else {
                        <div class="indent">
                            item.className = 'under';
                        </div>
                    }<br />
                    item.appendChild(document.createTextNode(item.name); <br />
                    list.appendChild(item); <br />
                </div>
            }<br />
            document.getElementById('list-container').appendChild(list);
        </div>
        <p>
            Neither of these approaches offers the clarity and ease of development commonly
            seen on the server side on any modern Web development platform. In comparison, here
            is what a JavaScript Client Page may look like:
        </p>
        <h2>JSCP with Embedded Code</h2>
        <div class="code preformatted">
&lt;?xml version="1.0" encoding="utf-8" ?&gt;
&lt;html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:js="http://www.codeplex.com/JSClientPages/JSElements"&gt;
    &lt;head&gt;
        &lt;title&gt;Page 1&lt;/title&gt;
        <span class="highlight">&lt;meta name="JSClientPage" content="employee-listing" /&gt;</span>
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;JSCP Example 2 : Employee Listing&lt;/h1&gt;

        &lt;h2&gt;Summary&lt;/h2&gt;

        &lt;div class="summary"&gt;
            &lt;span class="label"&gt;Number of Employees:&lt;/span&gt;
            &lt;span class="value"&gt;
                <span class="highlight">&lt;?js text(input.employees.length) ?&gt;</span>
            &lt;/span&gt;

            &lt;span class="label"&gt;Average Salary&lt;/span&gt;
            &lt;span class="value"&gt;
                <span class="highlight">&lt;?js text(input.averageSalary) ?&gt;</span> 
            &lt;/span&gt;
        &lt;/div&gt;

        &lt;h2&gt;All Employees&lt;/h2&gt;
        &lt;table class="listing"&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th&gt;First Name&lt;/th&gt;
                    &lt;th&gt;Last Name&lt;/th&gt;
                    &lt;th&gt;Position&lt;/th&gt;
                    &lt;th&gt;Salary&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                <span class="highlight">&lt;?js for(var i=0;i &lt; input.employees.length; i++) {&gt;</span>
                    &lt;tr&gt;
                        &lt;td&gt;
                            <span class="highlight">&lt;?js text(employees[i].firstName) ?&gt;</span>
                        &lt;/td&gt;
                        &lt;td&gt;
                            <span class="highlight">&lt;?js text(employees[i].lastName) ?&gt;</span>
                        &lt;/td&gt;
                        &lt;td&gt;
                            <span class="highlight">&lt;?js text(employees[i].position) ?&gt;</span>
                        &lt;/td&gt;
                        &lt;td&gt;
                            <span class="highlight">&lt;?js text(employees[i].salary) ?&gt;</span>
                        &lt;/td&gt;
                    &lt;/tr&gt;
                <span class="highlight">&lt;?js } ?&gt;</span>
            &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/body&gt;
&lt;/html&gt;
        
        </div>
        
        <h4>JSCP with XML tags</h4>
        <div class="code preformatted">
&lt;html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:js="http://www.codeplex.com/JSClientPages/JSElements"&gt;
    &lt;head&gt;
        &lt;title&gt;Page 1&lt;/title&gt;
        &lt;meta name="JSClientPage" content="employee-listing" /&gt;
    &lt;/head&gt;
    &lt;body&gt;        
        &lt;h1&gt;JSCP Example 2 : Employee Listing&lt;/h1&gt;       
        
        &lt;h2&gt;Summary&lt;/h2&gt;        
        
        &lt;div class="summary"&gt;
            &lt;span class="label"&gt;Number of Employees:&lt;/span&gt;
            &lt;span class="value"&gt;
                <span class="highlight">&lt;js:output value="input.employees.length" /&gt;</span>
            &lt;/span&gt;

            &lt;span class="label"&gt;Average Salary&lt;/span&gt;
            &lt;span class="value"&gt;
                <span class="highlight">&lt;js:output value="input.averageSalary" /&gt;</span>
            &lt;/span&gt;
        &lt;/div&gt;      

        &lt;h2&gt;All Employees&lt;/h2&gt;
        &lt;js:table class="listing"&gt;
            &lt;thead&gt;                
                &lt;tr&gt;
                    &lt;th&gt;First Name&lt;/th&gt;
                    &lt;th&gt;Last Name&lt;/th&gt;
                    &lt;th&gt;Position&lt;/th&gt;
                    &lt;th&gt;Salary&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;js:tbody&gt;
                <span class="highlight">&lt;js:forEach collection="input.employees" item="employee"&gt;</span>
                    &lt;tr&gt;
                        &lt;td&gt;
                            <span class="highlight">&lt;js:output value="employee.firstName" /&gt;</span>
                        &lt;/td&gt;
                        &lt;td&gt;
                            <span class="highlight">&lt;js:output value="employee.lastName"/&gt;</span>                           
                        &lt;/td&gt;
                        &lt;td&gt;
                            <span class="highlight">&lt;js:output value="employee.position"/&gt;</span>
                        &lt;/td&gt;
                        &lt;td&gt;
                            <span class="highlight">&lt;js:output value="employee.salary" /&gt;</span>                            
                        &lt;/td&gt;
                    &lt;/tr&gt;
                <span class="highlight">&lt;/js:forEach&gt;</span>
            &lt;/js:tbody&gt;
        &lt;/js:table&gt;
    &lt;/body&gt;
&lt;/html&gt;    
</div>       
<h4>Invocation Sample</h4> 
<div class="code preformatted">
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
    &lt;title&gt;JSCP Example 2 - Employee Listing&lt;/title&gt;
    &lt;link rel="Stylesheet" type="text/css" href="Style/Stylesheet.css" /&gt;

    &lt;script type="text/javascript" src="JSClientPages.js"&gt;&lt;/script&gt;

    &lt;script type="text/javascript" src="JSClientPage.ashx?page=Example2.xml"&gt;&lt;/script&gt;

    &lt;script type="text/javascript"&gt;
        employees = [];
        averageSalary = 0.0;


        function addEmployee() {
            var salary = document.getElementById('input-salary').value;

            if (!salary.match(/[1-9][0-9]*/)) {
                alert('The salary should be numeric (no decimals)');
            } else {
                salary = parseInt(salary);
                averageSalary = (averageSalary * employees.length + salary) / (employees.length + 1);
                employees.push(
                    {
                        firstName: document.getElementById('input-first-name').value,
                        lastName: document.getElementById('input-last-name').value,
                        position: document.getElementById('input-position').value,
                        'salary': salary
                    }
                );
                <div class="highlight">
                var parameters = {
                    'employees': employees,
                    'averageSalary': averageSalary
                };                            
                JSClientPage.refresh(
                    'employee-listing',
                    'employee-listing',
                    parameters
                );
                </div>
            }
        }
    &lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;
        JSCP Examples&lt;/h1&gt;
    &lt;h2&gt;
        Employee Listing&lt;/h2&gt;
    &lt;p&gt;
        This example illustrates JSCP's XML-based rendering capabilities
    &lt;/p&gt;
    &lt;form id="employee-form" action=""&gt;
    &lt;table class="form"&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    First Name
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;input id="input-first-name" type="text" name="first_name" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    Last Name
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;input id="input-last-name" type="text" name="last_name" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    Position
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;select id="input-position" name="position"&gt;
                        &lt;option value="Programmer"&gt;Programmer&lt;/option&gt;
                        &lt;option value="Manager"&gt;Manager&lt;/option&gt;
                        &lt;option value="Executive"&gt;Executive&lt;/option&gt;
                        &lt;option value="Accountant"&gt;Ancountant&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    Salary
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;input id="input-salary" type="text" name="salary" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;/form&gt;
    &lt;button onclick="addEmployee(); return false;"&gt;
        Add
    &lt;/button&gt;
    &lt;div id="employee-listing"&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
        
        </div>
        <a name="License"></a>
        <h3>License</h3>
        <p>
            This software is provided under a <span class="emphasis">BSD-style license</span>. 
            <a href="License.htm">Click here</a> to view it.
        </p>

    </div>
</body>
</html>
